import React, { useEffect, useState } from "react";
import { useHistory } from "react-router-dom";
import { Button,  Form, Input, message } from 'antd';
import {  PhoneOutlined } from '@ant-design/icons';
import { _getCode } from '@/service/service';
import { _loginByWeixin } from "./service";
import { LeftOutlined } from '@ant-design/icons';


const BindPhone: React.FC = () => {
    const history = useHistory();
    const [phone, setPhone] = useState<any>();
    useEffect(() => {
        const fetchData = async () => {
        }
        fetchData()
    }, [])

    const onFinish = async (values) => {
        const openid = localStorage.getItem('openId');
        const wx_token = localStorage.getItem('wx_token');
        !!values && await _loginByWeixin({
            phone: phone,
            wx_token: wx_token,
            openid: openid
        }).then((dataRes) => {
            if (dataRes.data.code === 200) {
                localStorage.setItem("token", dataRes.data.token);
                localStorage.setItem("role", dataRes.data.data.role);
                message.success('绑定成功！')
            }
            dataRes.data.code === 200 && history.push('/')
            dataRes.data.code !== 200 && message.error(dataRes.data.msg);
        })
    }

    return (
        <div className="login">
            <div className="header">
                <a className="goback" onClick={() => { window.history.back() }} ><LeftOutlined /></a>
                <div className="header-title">
                    绑定手机号
                </div>
            </div>
            <div className="login-main">
                <Form name="login" className="login-form" onFinish={onFinish}  >
                    <h1>绑定手机号</h1>
                    <Form.Item
                        className="form-item"
                        name="phone"
                        validateFirst="parallel"
                        validateTrigger="onBlur"
                        rules={[
                            { required: true, message: '请输入手机号码！' },
                            () => ({
                                validator(_, value) {
                                    if ((/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/).test(value)) {
                                        setPhone(value)
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('请输入正确的手机号！'));
                                },
                            }),
                        ]}
                    >
                        <Input
                            prefix={<PhoneOutlined rotate={180} style={{ fontSize: '18px', color: '#d4d4d4' }}
                                className="site-form-item-icon" />}
                            placeholder="手机号码"
                        />
                    </Form.Item>
                    <Form.Item className="form-item">
                        <Button shape="round" type="primary" size="large" block htmlType="submit">绑定手机号</Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}

export default BindPhone;
